<template>
	<div>
		<div class="pageTitle boxFlex">
			<!-- <breadcrumb></breadcrumb> -->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>通讯录管理</el-breadcrumb-item>
				<el-breadcrumb-item>邀请成员</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="pageContent">
			<div class="sectionTitle flex">
				<div>二维码邀请</div>
				<div>
					<el-button type="text" icon="el-icon-download">
						<a :href="invitationCode" download="sxnf_invitationCode.jpg" class="downLoadBtn">保存</a>
					</el-button>
				</div>
			</div>
			<div class="sectionCont">
				<el-image :src="invitationCode?invitationCode:$globalData.defaultImg" fit="cover" class="invitationImgs"></el-image>
			</div>

			<div class="sectionTitle">通过区域搜索邀请</div>
			<el-form :model="ruleForm" ref="numberValidateForm" label-width="10rem" class="demo-ruleForm">
				<el-form-item label="搜索区域：">
					<!-- <area-cascader v-model="addressArry.registeredAddress" style="width: 500px;float: left;margin-right: 10px;" :data="$pcaa" :level="2" type="text" icon="el-icon-arrow-down" placeholder="请选择地区"></area-cascader> -->
					<el-select v-model="addressArry.province" class="el-select" placeholder="请选择" @change="selectProvinceData">
						<el-option v-for="province in addressArry.provinceList" :label="province.name" :value="province.id"></el-option>
					</el-select>
					<el-select v-model="addressArry.city" class="el-select" placeholder="请选择" @change="selectCityData">
						<el-option v-for="city in addressArry.cityList" :label="city.name" :value="city.id"></el-option>
					</el-select>
					<el-select v-model="addressArry.district" class="el-select" placeholder="请选择" @change="selectDistrictData">
						<el-option v-for="district in addressArry.districtList" :label="district.name" :value="district.id"></el-option>
					</el-select>
					<el-select v-model="addressArry.town" class="el-select" placeholder="请选择" @change="selectTownData">
						<el-option v-for="town in addressArry.townList" :label="town.name" :value="town.id"></el-option>
					</el-select>
					<el-button @click="addsearch" type="primary">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="multipleTable" :data="searchBottomDataList" tooltip-effect="dark" style="width: 100%"
			 @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="userName" label="姓名"></el-table-column>
				<el-table-column prop="jobNumber" label="工号"></el-table-column>
				<!-- <el-table-column prop="rankName" label="职级">
					<template slot-scope="scope">
						{{scope.row.rankName?scope.row.rankName:scope.row.cusRankName?scope.row.cusRankName:'暂无职级'}}
					</template>
				</el-table-column> -->
				<el-table-column prop="companyName" label="主团队">
					<template slot-scope="scope">
						{{scope.row.companyName?scope.row.companyName:'暂无主团队'}}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="地域">
					<template slot-scope="scope">
						<div v-for="(item, index) in scope.row.areaEntityList" :key="index">
							{{item.addressId}}
							<!-- <span v-for="list in item" :key="list">{{ list }}</span> -->
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template slot-scope="scope">
						<el-button size="mini" :disabled="scope.row.apply?true:false" @click="postinviteMembers(scope.row)">{{scope.row.apply?'已邀请':'邀请'}}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="sectionTitle flex" style="margin-top: 40px;">
				<div>通过地理位置邀请</div>
				<div class="flex el-inputBox">
					<el-input class="el-inputBoxel-inputBox" v-model="distance" placeholder="请输入内容">
						<template slot="append">公里</template>
					</el-input>
					<div style="margin-left: 10px;">
						<el-button icon="el-icon-search" type="primary" @click="nearby">搜索</el-button>
					</div>
				</div>
			</div>
			<div class="sectionCont">
				<!-- <div class="flex el-inputBox">
					<el-input v-model="input" class="el-inputBoxel-inputBox" placeholder="请输入内容">
						<template slot="append">米</template>
					</el-input>
					<div>
						<el-button>搜索</el-button>
					</div>
				</div> -->
				<div class="mapBox flex">
					<div class="mapBoxmapBox">
						<baidu-map class="bm-view mapBoxmapBox" :center="maps.center" :zoom="maps.zoom" :scroll-wheel-zoom="true">
													 <bm-marker :position="maps.center" :dragging="true" />
						</baidu-map>
						<!-- <el-image :src="$globalData.defaultImg" fit="cover" class="InformationImgs"></el-image> -->
					</div>
					<div class="mapBoxList">
						<div style="width:100%;height:340px">
							<div class="mapBoxListItem flex" style="justify-content: space-between;">
								<div class="mapBoxListItemTitle">附近成员（{{nearbyCompany.totalNum}}）</div>
								<el-button size="mini" type="primary" @click="join">点击邀请</el-button>
							</div>
							 <el-checkbox-group class="mapBoxListItem" v-infinite-scroll="load" infinite-scroll-disabled="busy" style="height:290px;overflow:auto;border-bottom: none;" v-model="checkList">
                                <el-checkbox class="eliconcheck"  v-for="item in nearbyCompany.items" :label="item.id">
									<div class="mapBoxListItemTitle" style="width: 360px;">{{item.name}}</div>
								</el-checkbox>
                            </el-checkbox-group>
							<!-- <div class="mapBoxListItem">
								<el-checkbox class="eliconcheck">
									<div class="mapBoxListItemTitle">赵婧文</div>
								</el-checkbox>
							</div>
							<div class="mapBoxListItem">
								<el-checkbox class="eliconcheck">
									<div class="mapBoxListItemTitle">周薇</div>
								</el-checkbox>
							</div> -->
						</div>
					</div>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import breadcrumb from '../components/breadcrumb.vue'
	export default {
		components: {
			breadcrumb
		},
		data() {
			return {
				nearbyCompany:{},
				busy: false,
				checkList:[],
				maps:{
					// center:returnCitySN.cname,
					center: {lng: 106.53063501, lat: 29.54460611},
					zoom: 15
				},
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				ruleForm: {},

				userId: '',
				companyId: '',
				companyName: this.$store.state.company.companyName,
				invitationCode: '', // 邀请二维码
				addressArryList: new Map(), // 地址选择
				searchBottomDataList: [],
				distance: '',
				addressArry: {
					province: '', // 省
					provinceList: '', // 省数据
					city: '', // 市
					cityList: '', // 市数据
					district: '', // 区/县
					districtList: '', // 区/县数据
					town: '', // 镇
					townList: '', // 镇数据
					registeredAddress: ''
				}
			};
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 213)
			let userInfo = this.$store.state.user.userInfo
			this.userId = userInfo.id
			this.companyId = this.$store.state.company.selectCompanyId?this.$store.state.company.selectCompanyId:this.$store.state.company.companyId
			if(this.companyId){
				this.getProvinceData()
			}
			console.log(this.companyName)
			this.$forceUpdate()
				this.getPageData()
			
		},
		methods: {
			join(){
				this.$request.postForm(this.$api.inviteMembers, {
					companyId: this.$store.state.company.selectCompanyId,
					userId:this.checkList.join(',')
				}).then(res=>{
					if(res.code == 200){
						this.$message.success(res.message)
					}
				})
			},
			load(){
				this.busy = true
				this.distance.page ++
				this.$request.postForm(this.$api.searchUser, this.distance
					).then(res=>{
					if(res.code == 200){
						if(this.distance.page>res.data.totalPage){return false}
						else if(res.data.items.length > 0){
							res.data.items.forEach(val =>{
								this.nearbyCompany.items.push(val)
							})
						}
					}
				})
				this.busy = false
            },
			nearby(){
				if(this.distance.distance == ''){
					this.$message.error('请填写范围')
				}else{
					this.$request.postForm(this.$api.searchUser, {
						distance:this.distance,
						companyId:this.$store.state.company.selectCompanyId,
						page:1,
						pageSize:6
					}
					).then(res=>{
					if(res.code == 200){
						this.nearbyCompany = res.data
						
					}
				})
				}
			},
			addsearch() {
				// 通过地址搜索
				// console.log(this.addressArry.registeredAddress.join('/'))
				// return 
				if (this.addressArry.registeredAddress) {
					this.getCompanyList(this.addressArry.registeredAddress)
				} else {
					this.$message.error('请先选择地址')
				}
			},
			handleSelectionChange() {

			},
			postinviteMembers(item){
				// 邀请成员加入公司
				this.$request.postForm(this.$api.inviteMembers, {
					userId: item.userId,
					companyId: this.companyId
				}).then(res=>{
					if(res.code == 200){
						this.$message.success('邀请成功')
						this.getCompanyList(this.addressArry.registeredAddress)
					}
				})
			},
			getPageData() {
				// 获取页面数据
				this.$request.postForm(this.$api.qrCodeInvitation, {
					companyId: this.companyId
				}).then(res => {
					if (res.code == 200) {
						this.invitationCode = 'data:image/png;base64,' + res.data
					}
				})
			},
			getCompanyList(addid = '') {
				// getCompanyByTerm
				this.$request.postForm(this.$api.areaSearchUser, {
					companyId: this.companyId,
					areas: addid
				}).then(res => {
					if (res.code == 200) {
							this.searchBottomDataList = res.data
							console.log(this.searchBottomDataList)
						// if (res.data && res.data.length > 0) {
							// this.searchBottomDataList.forEach((v)=>{
							// 	v.territoryList = []
							// 	v.areaEntityList.forEach((t, q)=>{
							// 		let addressIdList = t.addressId.split(',').splice(2,)
							// 		v.territoryList.push(addressIdList)
							// 	})
							// })
						// }
					}
				})
			},
			useIdQueryAddress(id) {
				// 使用id查询地址
				this.$request.postForm(this.$api.getAddressName, {
					id: id
				}).then(res => {
					if (res.code == 200) {
						this.getAddressText(res.data)
					}
				})
			},
			getProvinceData() {
				// 获取省数据
				this.getAllAddressList('', (province) => {
					this.addressArry.provinceList = province
				})
			},
			getAllAddressList(id = '', callBack) {
				// 获取所有地址信息
				this.$request.postForm(this.$api.getAllAddress, {
					pid: id
				}).then(res => {
					if (res.code == 200) {
						callBack(res.data)
					}
				})
			},
			selectProvinceData(id) {
				// 选择省数据清空后面所有选择框数据
				this.addressArry.cityList = ''
				this.addressArry.districtList = ''
				this.addressArry.townList = ''
				this.addressArry.city = ''
				this.addressArry.district = ''
				this.addressArry.town = ''
				this.addressArryList.set('addId', id)
				this.addressArry.provinceList.filter(item=>{
					if(item.id == id){
						this.addressArry.registeredAddress = item.name
					}
				})
				// 获取市数据
				this.getAllAddressList(id, (city) => {
					this.addressArry.cityList = city
				})
			},
			selectCityData(id) {
				// 选择市数据清空后面所有选择框数据
				this.addressArry.districtList = ''
				this.addressArry.townList = ''
				this.addressArry.district = ''
				this.addressArry.town = ''
				this.addressArryList.set('addId', id)
				this.addressArry.cityList.filter(item=>{
					if(item.id == id){
						this.addressArry.registeredAddress = item.name
					}
				})
				// 获取区县数据
				this.getAllAddressList(id, (city) => {
					this.addressArry.districtList = city
				})
			},
			selectDistrictData(id) {
				// 选择区县数据清空后面所有选择框数据
				this.addressArry.townList = ''
				this.addressArry.town = ''
				this.addressArryList.set('addId', id)
				this.addressArry.districtList.filter(item=>{
					if(item.id == id){
						this.addressArry.registeredAddress = item.name
					}
				})
				// 获取镇数据
				this.getAllAddressList(id, (city) => {
					this.addressArry.townList = city
				})
			},
			selectTownData(id) {
				// 选择市数据清空后面所有选择框数据
				this.addressArryList.set('addId', id)
				this.addressArry.townList.filter(item=>{
					if(item.id == id){
						this.addressArry.registeredAddress = item.name
					}
				})
			},
		}
	};
</script>

<style scoped="scoped">
	.pageTitle {
		padding: 20px;
		border-bottom: 1px solid #DCDCDC;
		align-items: center;
	}

	.pageContent {
		padding: 20px;
	}

	.sectionTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		/* line-height: 30px; */
		background: #F3F3F3;
		padding: 10px 20px;
		align-items: center;
		justify-content: space-between;
	}

	.sectionCont {
		width: 100%;
		/* margin-left: 150px; */
		margin-top: 20px;
		margin-bottom: 60px;
	}

	.el-inputBox,
	.mapBox {
		justify-content: space-between;
	}

	.el-inputBoxel-inputBox {
		width: 300px;
	}

	.mapBox {
		margin-top: 20px;
		height: 300px;
	}

	.mapBoxmapBox {
		width: 460px;
		height: 340px;
		margin-right: 20px;
	}

	.mapBoxList {
		width: 430px;
	}

	.mapBoxListItem {
		width: 430px;
		padding: 10px;
		border-bottom: 1px solid #DCDCDC;
		position: relative;
		cursor: pointer;
		padding-left: 10px;
	}

	.eliconcheck>>>.el-checkbox__input {
		/* position: absolute; */
		/* left: 10px; */
		margin-top: -30px;
	}
	.eliconcheck{
		border-bottom: 1px solid #DCDCDC;
		margin-right: 0;
		padding: 2px 0;
	}
	.mapBoxListItemTitle{
		width: 390px;
		height: 35px;
		line-height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.mapBoxListItemAddress {
		width: 390px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mapBoxListItemTitle {
		font-size: 14px;
		color: #333333;
	}

	.mapBoxListItemAddress {
		font-size: 12px;
		color: #808080;
	}

	.InformationImgs {
		width: 100%;
		height: 100%;
	}

	.el-icon-check {
		position: absolute;
		right: 0;
		top: 15px;
		bottom: 0;
		margin: auto;
		color: #23B14D;
	}

	.demo-ruleForm {
		margin-top: 20px;
		margin-bottom: 60px;
	}

	.demo-ruleForm>>>.el-select {
		width: 15rem;
		margin-right: 20px;
	}

	.invitationImgs {
		width: 300px;
		height: 300px;
		position: relative;
		left: 50%;
		margin-left: -150px;
	}

	.downLoadBtn {
		text-decoration: none;
		color: #23B14D;
	}
</style>
